<template>
  <CollapseContainer title="查询条件">
    <BasicForm
      autoFocusFirstItem
      :labelWidth="80"
      :schemas="schemas"
      :actionColOptions="{ span: 24 }"
      @submit="handleSubmit"
      @reset="handleReset"
    />
  </CollapseContainer>
</template>

<script lang="ts" setup>
  import { CollapseContainer } from '/@/components/Container';
  import { BasicForm } from '/@/components/Form';
  import type { FormSchema } from '/@/components/Form';
  import { useShopUserStore } from '/@/store/modules/shopUsers';

  const emits = defineEmits(['getUserList', 'getSingleUser']);

  const schemas: FormSchema[] = [
    {
      field: 'uId',
      component: 'Input',
      label: 'ID',
      colProps: {
        span: 6,
      },
      defaultValue: null,
      componentProps: {
        placeholder: '优先查询ID，匹配不到ID则查询其他条件',
      },
    },
    {
      field: 'username',
      component: 'Input',
      label: '用户名',
      colProps: {
        span: 6,
      },
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
    },
  ];
  const shopUserStore = useShopUserStore();

  async function handleSubmit(values: any) {
    shopUserStore.setQuery({ id: parseInt(values.uId), username: values.username });
    console.log(shopUserStore.getQuery);
    // return console.log(shopUserStore.getQuery);
    if (values.uId) {
      await emits('getSingleUser');
      return;
    }
    emits('getUserList');
  }
  function handleReset() {
    shopUserStore.setQuery({ id: '', username: '' });
    emits('getUserList');
  }
</script>
